<template>
  <div class="footer_wrap">
     <dl
     class="footer_item"
      v-for="(item, index) in linkList"
      :key="index"
      @click="setActive(item)"
      >
         <dt>
              <van-icon
          :name="item.icon"
          :color="active == item.path ? '#ee0a24' : ''"
          
        />
         </dt>
         <dd>
               <router-link :to="item.path">{{ item.name }}</router-link>
         </dd>
     </dl>

  </div>
</template>

<script>
export default {
  name:"Footer",
  data(){
      return {
           active: "/",
      linkList: [
        {
          path: "/",
          name: "首页",
          icon: "shop-o",
        },
        {
          path: "/classify",
          name: "分类",
          icon: "shop-o",
        },
        {
          path: "/shop",
          name: "购物车",
          icon: "cart-o",
        },
        {
          path: "/my",
          name: "我的",
          icon: "friends-o",
        },
      ],
    };
      },
  
  methods: {
      setActive (item) {
          this.active =item.path
      }
  }
}
</script>

<style  scoped lang="scss">
.footer_wrap {
    font-size: 15px;
  border-top: 1px solid #ccc;
  height: 50px;
  display: flex;
  justify-content: space-around;
 
  .footer_item {
    text-align: center;
    
  line-height: 15px;
    dt{
         margin: 0px;
    }
    dd {
      margin: 0px;
      padding: 0;
      a {
        color: black;
      }
    }
  }
}


</style>